<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="username">
    <input type="checkbox" name="" id="remember">记住用户名

    <script>
        // 1. 获取节点
        let username = document.querySelector('#username');
        let remember = document.querySelector('#remember');

        // 2. 如果本地有数据
        if (localStorage.getItem('username')) {
            // 2.1 就把这个数据弄到文本框里
            username.value = localStorage.getItem('username');
            // 2.2 选择框，也要被选中
            remember.checked = true;
        }

        // 3. 如果选择框的选择状态有变化
        remember.addEventListener('change', function () {
            // 3.1 如果被选中为true
            if (this.checked) {
                // 3.2 把文本框的值，存储为本地数据，键username的值
                localStorage.setItem('username', username.value);
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>
</body>

</html>